<?php
include 'logic_layer.php';


if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "create") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-Equiv="Cache-Control" Content="no-cache">
        <meta http-Equiv="Pragma" Content="no-cache">
        <meta http-Equiv="Expires" Content="0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <div class="container">
            <!-- Part 0: Steps -->
            <div class="navbar navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="steps">
                        <p class="steps-done">Welcome &#10140; Outline &#10140; Personality Test &#10140; IFTTT Tutorial &#10140; Rating Recipes &#10140;</p>
                        <p class="step-current">Creating a Recipe</p>
                        <p class="steps-pending"> &#10140; Questionnaire</p>
                    </div>
                </div>
            </div>

            <form action='index.php' method='post' name='frm' class="form-inline">
                <div class="page-header">
                    <h1>Create a Recipe of Your Own</h1>
                </div>

                <p class="lead"  > Please follow the following steps to <b>create a recipe</b>:</p>

                <ul >
                    <li><p class="lead "> <a target="_blank" href="https://ifttt.com/join"><b>Sign up</b></a> for an IFTTT account if you haven't already</p></li>
                    <li><p class="lead "> <b><a target="_blank" href="https://ifttt.com/create">Create a Recipe</a></b> as described in the tutorial</p></li>
                    <li><p class="lead "> After you created a recipe, go to <b><a target="_blank" href="https://ifttt.com/myrecipes/personal">My Recipes</a></b> and open the recipe you just created</p></li>
                    <li><p class="lead "> From the right side menu select <b>Publish</b></p></li>
                    <img src="./resources/images/ifttt2.jpg">
                    <li><p class="lead "> Specify an appropriate title and note, and then press <b>Publish Recipe</b> at the bottom of the page</p></li>
                    <li><p class="lead "> Copy the URL from your browser address bar, get back to this page/tab, and paste the URL in the box below:</p></li>
                    <img src="./resources/images/ifttt1.jpg">
                </ul>


                <label class="checkbox">Recipe URL:</label>
                <input type="text" class="input-large"  name="url">


                <button style="width: 190px;margin-left: 100px;" id="nextButton" class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>

                <input type='hidden' value='imiq' name="step" />

            </form>


        </div>
        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>


                    //==============
                    var continueStudy = function() {
                        // go to the next step
                        if ($("input[name='url']").val().trim() === "" || !$("input[name='url']").val().trim().match(/https\:\/\/ifttt\.com\/recipes\/.+/i)) {

                            bootbox.alert("Please enter the correct URL of the recipe. A recipe URL is formatted as https://ifttt.com/recipes/your_recipe_title.");
                        } else {
                            document.frm.submit();
                        }

                    }

        </script>

    </body>
</html>
